/*
=========================================================
Editor		: OH00
Version		: 1.0
Since		: 2017-03-31
Last Up Date	:  2017-03-31 00:00
=========================================================

[Index]
- wrapper css / Do not change
	- header
	- global nav
	- footer
	- content

================================================= */
/* all reset */
#comHeader h1, #comHeader h2, #comHeader h3, #comHeader h4, #comHeader h5, #comHeader h2 + .h3, #comHeader section, #comHeader h3 + p, #comHeader h3 + ul, #comHeader h4 + p, #comHeader h4 + ul, #comHeader h3 + table, #comHeader h4 + table, #comHeader section > h4:first-child, #comHeader section > h3:first-child, #comHeader p, #comHeader ul, #comHeader dl, #comHeader table, #comHeader p img,
#comHeader li img, #comHeader dt img, #comHeader dd img {
    margin-top: 0;
    margin-bottom: 0;}

#comFooter h1, #comFooter h2, #comFooter h3, #comFooter h4, #comFooter h5, #comFooter h2 + .h3, #comFooter section, #comFooter h3 + p, #comFooter h3 + ul, #comFooter h4 + p, #comFooter h4 + ul, #comFooter h3 + table, #comFooter h4 + table, #comFooter section > h4:first-child, #comFooter section > h3:first-child, #comFooter p, #comFooter ul, #comFooter dl, #comFooter table, #comFooter p img,
#comFooter li img, #comFooter dt img, #comFooter dd img {
    margin-top: 0;
    margin-bottom: 0;}

#comSide h1, #comSide h2, #comSide h3, #comSide h4, #comSide h5, #comSide h2 + .h3, #comSide section, #comSide h3 + p, #comSide h3 + ul, #comSide h4 + p, #comSide h4 + ul, #comSide h3 + table, #comSide h4 + table, #comSide section > h4:first-child, #comSide section > h3:first-child, #comSide p, #comSide ul, #comSide dl, #comSide table, #comSide p img,
#comSide li img, #comSide dt img, #comSide dd img {
    margin-top: 0;
    margin-bottom: 0;}


/* --------------------------------------------
header
----------------------------------------------- */
#comHeader {
    max-width: 1153px;
    height: 96px;
    position: relative;}

    #comHeader a {
        text-decoration: none;
        color: #000;}

#headLogo {
    width: 158px;}

#headGroupLogo {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 81px;}

#headMenu {
    position: absolute;
    top: -2px;
    right: 117px;}

    #headMenu::after {
        content: "";
        display: block;
        width: 0;
        height: 0;
        clear: both;}

    #headMenu .headLink {
        float: left;
        font-size: 16px;
        margin-top: 2px;}

        #headMenu .headLink a:hover {
            text-decoration: underline;}

    #headMenu .searchArea {
        float: left;
        width: 16px;
        overflow: hidden;
        -webkit-transition: width 0.5s ease;
        -moz-transition: width 0.5s ease;
        -o-transition: width 0.5s ease;
        -ms-transition: width 0.5s ease;
        transition: width 0.5s ease;}

        #headMenu .searchArea.on {
            width: 280px;}

        #headMenu .searchArea form {
            padding-left: 26px;
            padding-top: 2px;
            background-image: url(../common/images/search_ico.gif);
            background-repeat: no-repeat;
            background-position: 0 50%;
            background-size: 16px 16px;
            cursor: pointer;}

        #headMenu .searchArea input {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            -o-box-sizing: border-box;
            -ms-box-sizing: border-box;
            box-sizing: border-box;
            display: block;
            outline: 0;
            width: 100%;
            border: none;
            border-bottom: solid 1px #000000;
            font-size: 13px;
            line-height: 1.2;
            color: #000000;
            -webkit-appearance: none;
            border-radius: 0;
            vertical-align: middle;}

        #headMenu .searchArea span.placeholder {
            font-size: 13px;}

        #headMenu .searchArea input:-ms-input-placeholder {
            color: #fff;}

    #headMenu .hnav {
        float: left;
        margin: 4px 20px 0;
        padding-right: 21px;
        position: relative;}

        #headMenu .hnav::after {
            content: "";
            display: block;
            width: 1px;
            height: 11px;
            position: absolute;
            right: 0px;
            top: 50%;
            margin-top: -5.5px;
            background-color: #000000;}

        #headMenu .hnav ul::after {
            content: "";
            display: block;
            width: 0;
            height: 0;
            clear: both;}

        #headMenu .hnav ul li {
            float: left;
            margin-left: 20px;
            font-size: 16px;
            line-height: 1.2;}

            #headMenu .hnav ul li:first-child {
                margin-left: 0;}

    #headMenu .headLang {
        float: left;
        font-size: 0;
        margin-top: 4px;}

        #headMenu .headLang strong,
        #headMenu .headLang span,
        #headMenu .headLang a {
            position: relative;
            display: inline-block;
            vertical-align: middle;
            font-size: 14px;
            line-height: 1.2;
            font-weight: normal;}

        #headMenu .headLang span,
        #headMenu .headLang a {
            margin-left: 0.5em;}

            #headMenu .headLang span::after,
            #headMenu .headLang a:hover::after {
                content: "";
                position: absolute;
                bottom: -4px;
                left: 0;
                width: 100%;
                height: 2px;
                background-color: #000000;}


/* global nav
----------------------------------------------- */
#gnav {
    position: absolute;
    top: 33px;
    right: 117px;
    z-index: 150;}

    #gnav nav > ul {
        text-align: left;
        font-size: 12pt;}

        #gnav nav > ul + ul {
            display: none;}

        #gnav nav > ul > li {
            display: inline-block;
            vertical-align: top;
            font-size: 18px;
           
            line-height: 1.2;
            margin-left: 25px;
            position: relative;}

            #gnav nav > ul > li:first-child {
                margin-left: 0px;}

            #gnav nav > ul > li > p a {
                position: relative;
                z-index: 1;
                text-transform: uppercase;}




            #gnav nav > ul > li a:hover,
            #gnav nav > ul > li.selected > a,
            #gnav nav > ul > li.selected > a:hover {
                color: #005bac;}

            #gnav nav > ul > li.active > p a,
            #gnav nav > ul > li.selected > p a:hover {
                border-bottom: 2px solid #d1d1d1;
                background-color: #D1D1D1;}


            #gnav nav > ul > li .megaDrop {
                position: absolute;
                top: 34px;
                left: 0px;
                width: 100%;
                text-align: left;
                /* background: url("../../images/line.jpg") repeat-y;*/
                z-index: 0;
                display: none;}

            #gnav nav > ul > li.active .megaDrop {
                z-index: 100;}

            #gnav nav > ul > li .megaDrop .inner .catTl {
                background-color: rgba(0,95,171,0.9);
                min-width:350px;
                text-align:right;}

                #gnav nav > ul > li .megaDrop .inner .catTl p {
                    
                    font-size: 76px;
                    line-height: 1;
                    color: #ffffff;
                    margin-top: -6px;
                    text-transform: uppercase;}

            #gnav nav > ul > li .megaDrop .inner .detail {
                background-color: rgba(209,209,209,0.9);}





            #gnav nav > ul > li .megaDrop .bottom-line {
                width: 100%;
                height: 32px;
                background-color: #195a90;
                display: inline-flex;
                align-items: center;}

                #gnav nav > ul > li .megaDrop .bottom-line .bottom-line-close {
                    width: 1153px;
                    margin: 0 auto;
                    text-align: right;
                    padding-right: 20px;
                    display: inline-flex;
                    align-items: center;
                    justify-content: flex-end;}



            #gnav nav > ul > li .megaDrop .inner .detail ul {
                display: flex;
                flex-wrap: wrap;
                text-align:left;}



                #gnav nav > ul > li .megaDrop .inner .detail ul li {
                    list-style: none;
                    padding: 20px 5px;}

                #projects1{
                    width:190px;}

#company1{
    width:190px;}

#company2 {
    width: 210px;}

#company3,#company4 {
    width: 160px;}


#air1{
  width:200px;}

#air2{
 width:280px;}
#air3{
    width:300px;}

#air4 {
    width: 200px;}

#air5 {
    width: 280px;}

#air6 {
    width: 300px;}

#sulfur1{
    width:240px;}

#sulfur2 {
    width: 260px;}

#sulfur3 {
    width: 240px;}

#sulfur4{
    width: 240px;}

#sulfur5{
    width: 260px;}


#projects2 {
    width: 500px;}

#projects3 {
    width:190px;}

#projects4{
    width: 260px;}
#projects5{
    width:250px;}

#projects6 {
    width: 160px;}
#projects7{
    width:190px;
    margin-left:30px;}

#news1{
    width:120px;}
#news2 {
    width:210px;}
#news3{
    width:420px;}

#Sustaninability1{
    width: 210px;}

#Sustaninability2{
    width: 100px;}

#Sustaninability3{
    width:100px;}

#Sustaninability4{
    width: 190px;}

                #gnav nav > ul > li .megaDrop .inner .detail ul + hr {
                    border-bottom: none;
                    border-top: solid 1px #737373;
                    margin: 24px 0;}

                    #gnav nav > ul > li .megaDrop .inner .detail ul + hr + ul.comSubNv li {
                        font-size: 14px;}

                    #gnav nav > ul > li .megaDrop .inner .detail ul + hr + ul.comSubNv.col1 li {
                        float: none;
                        width: auto;}

            #gnav nav > ul > li .megaDrop .close {
                position: absolute;
                top: 30px;
                right: 72px;
                width: 13px;
                height: 13px;
                overflow: hidden;
                text-indent: 100%;
                white-space: nowrap;
                cursor: pointer;}

                #gnav nav > ul > li .megaDrop .close::before {
                    display: block;
                    content: "";
                    position: absolute;
                    top: 50%;
                    left: -1px;
                    width: 15px;
                    height: 2px;
                    margin-top: -1px;
                    background: #000;
                    transform: rotate(45deg);
                    -webkit-transition: background .2s;
                    transition: background .2s;}

                #gnav nav > ul > li .megaDrop .close::after {
                    display: block;
                    content: "";
                    position: absolute;
                    top: 50%;
                    right: -1px;
                    width: 15px;
                    height: 2px;
                    margin-top: -1px;
                    background: #000;
                    transform: rotate(-45deg);
                    -webkit-transition: background .2s;
                    transition: background .2s;}

                #gnav nav > ul > li .megaDrop .close:hover::before,
                #gnav nav > ul > li .megaDrop .close:hover::after {
                    background: #666;}

    #gnav .searchArea,
    #gnav .headLink,
    #gnav .headLang,
    #spMenuBtn {
        display: none;}

/* for IR ajust font-size
#gnav nav > ul > li > p a span.al,
#gnav nav > ul > li .megaDrop .catTl p > span.al,
#comContent h1.comSecH1 span.al{
	font-size:116%;
	font-family:'Noto Sans CJK JP Medium', Arial, Helvetica, sans-serif;
} */


/* not responsive
----------------------------------------------- */
#comHeader.nores {
    width: 1153px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0 auto;}

    #comHeader.nores #headLogo {
        width: 181px;
        height: 41px;
        margin-left: 20px;
        margin-bottom: 5px;}

        #comHeader.nores #headLogo img {}

    #comHeader.nores #headGroupLogo {
        width: 81px;
        right: 30px;}



    #comHeader.nores #spMenuBtn {
        display: none;}

    #comHeader.nores #gnav {
        top: 65px;
        right: 0;
        left: auto;
        width: auto;
        display: block;
        padding-bottom: 0;
        background-color: transparent;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;}

        #comHeader.nores #gnav nav > ul {
            width: auto;
            margin: 0;}

            #comHeader.nores #gnav nav > ul > li {
                display: inline-block;
                font-size: 12pt;
                margin-left: 30px;}

                #comHeader.nores #gnav nav > ul > li:first-child {
                    margin-left: 0;}

                #comHeader.nores #gnav nav > ul > li > a,
                #comHeader.nores #gnav nav > ul > li > p a {
                    padding: 15px;}



                #comHeader.nores #gnav nav > ul > li .megaDrop .inner {
                    width: 1153px;
                    overflow: hidden;
                    padding: 0;
                    display: flex;
                    margin: 0 auto;
                    height: 250px;}



                        #comHeader.nores #gnav nav > ul > li .megaDrop .inner .catTl p {
                            
                            display: inline-flex;
                            justify-content: flex-end;
                            padding: 47px 60px 0 0;
                            font-size: 32px;
                            font-weight:bold;}

                    #comHeader.nores #gnav nav > ul > li .megaDrop .inner .detail {
                        width:100%;
                        padding-top: 35px;}



                #comHeader.nores #gnav nav > ul > li .megaDrop .close {
                    bottom: 20px;
                    right: 72px;
                    font-size: 16px;
                    padding-right: 28px;
                    background-size: 21px 12px;}




.comHeaderFollow {
    position: fixed;
    z-index: 99;
    left: 0;
    top: 0;
    width: 100%;
    background: #fff;
    opacity: 1;
    -webkit-transition: top .3s ease, padding .1s ease-out, opacity .3s ease;
    transition: top .3s ease, padding .1s ease-out, opacity .3s ease
;}

    /*
.isScrolled.isHeaderHide .comHeaderFollow {
    opacity: 0
}
*/

.comHeaderFollow #comHeader {
    margin: 0 auto
;}


.comHeaderFollow #comHeader {
    margin: 0 auto
;}

.comHeaderFollow:hover {
    opacity: 1
;}




#gnav {
    -webkit-transition: .3s ease;
    transition: .3s ease
;}


/*
.isScrolled #search,
.isScrolled #headLogo,
.isScrolled #gnav {
    visibility: hidden;
    opacity: 0;
    -webkit-transition: .3s ease;
    transition: .3s ease
}


.isScrolled .comHeaderFollow:hover #gnav, .isScrolled .comHeaderFollow:hover #headLogo, .isScrolled .comHeaderFollow:hover #search {
    visibility: visible;
    opacity: 1;
    -webkit-transition: .3s ease;
    transition: .3s ease
}
*/
@media only screen and (min-width: 992px) and (max-width:1440px) {
}